<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      改变a的值 <button @click="change">change+{{a}}</button><br />
      <input type="text" v-model="num1" />
      <button>-</button>
      <input type="text" v-model="num2" />
      <br />
      <span>method实现两数相减：{{countNum1()}}</span>
      <!-- 方法执行不管跟她有关的还是无关的变量发生变化，都会重新计算 -->
      <br />
      <span>计算属性实现两数相减：{{countNum2}}</span>
      <!-- 计算属性只有跟他有关的值发生变化才会重新计算 -->
    </div>
    <script src="lib/vue.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          a: 0,
          num1: 0,
          num2: 0,
        },
        methods: {
          change() {
            this.a++;
            //a是跟两数相减没有关系的一个变量，执行change方法的时候让a的值++
          },
          countNum1() {
            console.log("方法计算两数相减");
            return this.num1 - this.num2;
          },
        },
        computed: {
          countNum2() {
            console.log("计算属性实现两数相减");
            return this.num1 - this.num2;
          },
        },
      });
    </script>
  </body>
</html>
